<template>
  <div class='create-container'>
    <el-form class='create-item' ref="formcreate" :model="formcreate" label-width="50px" :rules="formrules">
      <el-form-item label="昵称" prop="name">
        <el-input v-model="formcreate.name" placeholder="请输入昵称">
          <el-button slot="append" type="primary" v-on:click="randomname">随机昵称</el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-radio-group v-model="formcreate.gender">
          <el-radio-button :label="0">男性</el-radio-button>
          <el-radio-button :label="1">女性</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="门派" prop="family">
        <el-select class='w-100' v-model="formcreate.family" placeholder="请选择门派">
          <el-option v-for="item in this.conf.ConfigFamily" :key="item.Id" :label="item.Id" :value="item.Id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-button round type="primary" class="btn-block" v-on:click="oncreate">角色创建</el-button>
    </el-form>
  </div>
</template>

<script>

export default {
  data: function () {
    return {
      vdata: this.gdata.data,
      formcreate: {
        name: '小虾米',
        gender: 0,
        family: '南海普陀山'
      },
      formrules: {
        name: [{ required: true, message: '昵称不能为空', trigger: 'blur' }],
        gender: [{ required: true, message: '性别不能为空', trigger: 'blur' }],
        family: [{ required: true, message: '门派不能为空', trigger: 'blur' }]
      }
    }
  },
  mounted: function () {
    this.formcreate.gender = this.jxrandomarr([0, 1])
    this.randomname()
    this.formcreate.family = this.jxrandomvalue(this.conf.ConfigFamily).Id
  },
  methods: {
    randomname: function () {
      // eslint-disable-next-line no-undef
      var name = this.jxrandomvalue(this.conf.ConfigSurname).LangChs
      if (this.formcreate.gender === 0) {
        name += this.jxrandomvalue(this.conf.ConfigMalename).LangChs
      } else {
        name += this.jxrandomvalue(this.conf.ConfigFemalename).LangChs
      }
      this.formcreate.name = name
    },
    oncreate: function (event) {
      var req = this.wsreq('C2G_LOGIN_PLAYERCREATE')
      req.Name = this.formcreate.name
      req.Gender = this.formcreate.gender === 0 ? '男性' : '女性'
      req.Family = this.formcreate.family
      this.wssend(req)
    },
    onkeyevent: function (key) {
      // 回车
      if (key === 13) {
        this.oncreate()
      }
    },
    G2C: function (pid, rsp, success, result) {
      switch (pid) {
        case 'G2C_LOGIN_PLAYERCREATE':
          var reqinfo = this.wsreq('C2G_INFO_GETALL')
          this.wssend(reqinfo)
          this.jxpage('game')
          break
        default:
          break
      }
    }
  }
}
</script>

<style scoped>
.create-container {
  display: flex;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: center;
}
.create-item {
  width: 60vw;
}
</style>
